<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面向对象（发牌）</title>
    <style>
        ol {
            list-style: none;
            display: flex;
            flex-wrap: wrap;

        }

        ol>li:not(:first-child) {
            width: 105px;
            height: 150px;
            border-radius: 5px;
            margin-left: -60px;
        }
    </style>
</head>

<body>
    <!-- 第一个玩家 -->
    <div id="players_one">
        <h2>玩家1</h2>
        <ol id="one">
        </ol>
    </div>
    <!-- 第二个玩家 -->
    <div id="players_two">
        <h2>玩家2</h2>
        <ol id="two">
        </ol>

    </div>
    <!-- 第三个玩家 -->
    <div id="players_three">
        <h2>玩家3</h2>
        <ol id="three">

        </ol>

    </div>
    <!--底牌 -->
    <div id="lost">
        <h2>底牌</h2>
        <ol id="more">

        </ol>

    </div>


    <script src="../random_number.js"></script>
    <script>
        const number = ['3', '4', '5', '6', '7', '8', '9', '10', "J", "Q", "K", "A", '2'];
        const flower = ["♠️", "♥️", "♣️", "♦️"]; // 黑桃 < 红心 < 梅花 < 方块
        let arr = [];
        let i = 1;

        function creat() {

            //发牌
            for (let n = 0; n < number.length; n++) {
                for (let f = flower.length - 1; f >= 0; f--) {
                    let obj = {
                        number: n,
                        flower: f,
                        str: `${flower[f]}${number[n]}`,
                        url: `pkp_${i++}.jpg`
                    };
                    arr.push(obj);
                }
            }
            arr.push({
                number: 13,
                flower: null,
                str: '小王',
                url: `pkp_53.jpg`
            }, {
                number: 14,
                flower: null,
                str: '大王',
                url: `pkp_54.jpg`
            });

            //打乱
            let s = new Set();
            while (s.size < 54) {
                s.add(random(53))
            }
            let arr2 = [...s];

            //重新组装
            let arr3 = arr2.map(item => arr[item]);

            //放牌
            let players1 = arr3.slice(0, 17);
            let players2 = arr3.slice(17, 34);
            let players3 = arr3.slice(34, 51);
            let def = arr3.slice(51, 54);

            return [players1, players2, players3, def];
        }
        let [players1, players2, players3, def] = creat();

        class Poker {
            constructor(obj, parentNode) { // obj->{}
                this.obj = obj;
                this.node = null; // 这个节点
                this.parentNode = parentNode;
            }
            render() {
                this.node = document.createElement('li');
                this.node.innerHTML = `<img src='./pokerImg/${this.obj.url}'>`;
                this.node.style.cssText = `margin-left: -20px`;
                this.parentNode.appendChild(this.node);
            }
        }

        function sort(arr, parentNode) {
            arr.sort((a, b) => {
                if (a.number == b.number) {
                    return a.flower - b.flower;
                } else {
                    return a.number - b.number;
                }
            });
            arr.forEach(item => { // item-> {}
                new Poker(item, parentNode).render(); // 实例得到牌对象，爹元素
            });
        }
        sort(players1, one)
        sort(players2, two)
        sort(players3, three)
        sort(def, more)
    </script>

</body>

</html>